<template>
  <div class="content">
    <!-- 顶部的搜索栏 -->
    <div class="input">
      <div class="input-left">
        <span>状态：</span>
        <el-select
          v-model="value"
          placeholder="请选择"
          @change="selectChanged"
          size="medium"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.value"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="input-right">
        <span>名称：</span>
        <el-input
          placeholder="请输入名称"
          v-model="input1"
          size="medium"
          class="inline-input"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click.native="inputChange(input1)"
          ></el-button>
        </el-input>
      </div>
    </div>
    <div class="btn">
      <el-button type="primary" size="small">新增产品分类</el-button>
    </div>
  </div>
</template>

<script>
// 引入axios方法
import { treeList } from "@/network/api/store/sort";
export default {
  data() {
    return {
      restaurants: [],
      state1: "",
      input1: "",
      options: [
        {
          value: "全部",
        },
        {
          value: "显示",
        },
        {
          value: "不显示",
        },
      ],
      value: "全部",
    };
  },
  methods: {
    async selectChanged(item) {
      let type = 1;
      switch (item) {
        case "全部":
          type = -1;
          break;
        case "显示":
          type = 1;
          break;
        case "不显示":
          type = 0;
          break;
      }
      let { updateList } = this.$parent;
      let res = await treeList(type);
      let list = res.data.data;

      list.forEach((item) => {
        item.type = "产品分类";
        if (item.child) {
          item.child.forEach((ite) => {
            ite.type = "产品分类";
          });
        }
      });

      updateList(list, type);
    },
    async inputChange(item) {
      let res = await treeList(1, item);
      let { updateList } = this.$parent;
      let list = res.data.data;
      list.forEach((item) => {
        item.type = "产品分类";
        if (item.child) {
          item.child.forEach((ite) => {
            ite.type = "产品分类";
          });
        }
      });
      updateList(list);
    },
  },
};
</script>

<style scoped lang="scss">
.content {
  margin-top: 10px;
  .inline-input {
    width: 300px;
  }
  .top {
    padding: 20px;
  }
  //   input框样式
  .input {
    display: flex;
    justify-content: flex-start;
    .input-left,
    .input-right {
      display: flex;
      width: 500px;
      align-items: center;
      span {
        display: inline-block;
        font-size: 14px;
        color: #606266;
        width: 82px !important;
        margin-bottom: 6px;
        font-weight: 700;
      }
    }
    .input-left {
      margin-right: 20px;
    }
  }

  //   按钮样式
  .btn {
    margin-top: 15px;
    display: flex;

    el-button {
      margin-right: 25px;
    }
  }
  ::v-deep .el-input-group__append {
    position: relative;
    top: -2px;
  }
}
</style>
